<template>
	<view class="custom-tab-bar">
		<image src="../static/bg_tab_bar.png" mode="aspectFill" class="tab-bar-bg"></image>
		<view class="tab-bar">
			<view class="tab-bar-item" @click="changeTabIndex(0)">
				
				<image class="tab-bar-item-icon" :src="tabIndex == 0 ? '../static/ic_home_active.png' : '../static/ic_home.png'"></image>
				<text class="tab-bar-item-text" :class="{'active': tabIndex == 0}">首页</text>
			</view>
			<view class="tab-bar-item" @click="changeTabIndex(1)">
				
				<image class="tab-bar-item-icon" :src="tabIndex == 1 ? '../static/ic_search_active.png' : '../static/ic_search.png'"></image>
				<text class="tab-bar-item-text" :class="{'active': tabIndex == 1}">门店查询</text>
			</view>
			<view class="tab-bar-item" @click="changeTabIndex(2)">
				
				<image class="tab-bar-item-icon" :src="tabIndex == 2 ? '../static/ic_about_active.png' : '../static/ic_about.png'"></image>
				<text class="tab-bar-item-text" :class="{'active': tabIndex == 2}">了解星梦圆</text>
			</view>
			<view class="tab-bar-item" @click="changeTabIndex(3)">
				<image class="tab-bar-item-icon" :src="tabIndex == 3 ? '../static/ic_checking_active.png' : '../static/ic_checking.png'"></image>
				<text class="tab-bar-item-text" :class="{'active': tabIndex == 3}">防伪验证</text>
			</view>
			<view class="tab-bar-item" @click="changeTabIndex(4)">
				<image class="tab-bar-item-icon" :src="tabIndex == 4 ? '../static/ic_my_active.png' : '../static/ic_my.png'"></image>
				<text class="tab-bar-item-text" :class="{'active': tabIndex == 4}">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			const res = uni.getSystemInfoSync()
			console.log(res)
		},
		data() {
			return {
			}
		},
		computed: {
			tabIndex() {
				return this.$store.state.tabIndex
			}
		},
		methods: {
			changeTabIndex(tabIndex) {
				this.$store.commit('changeTabIndex', tabIndex)
			}
		}
	}
</script>

<style>
.custom-tab-bar {
	/* z-index: 1; */
	/* background-color: red; */
	padding-bottom: constant(safe-area-inset-bottom); 
	padding-bottom: env(safe-area-inset-bottom); 
	width: 100vw;
	position: fixed;
	bottom: 0;
	left: 0;
}
.tab-bar-bg {
	z-index: 1;
	position: absolute;
	height: 100%;
	width: 100%;
}
.tab-bar {
	height: 100rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 15rpx;
}
.tab-bar-item {
	z-index: 2;
	/* background-color: red; */
	height: 90rpx;
	width: 130rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: "yshst" !important;
}
.tab-bar-item-text {
	font-size: 23rpx;
	margin-top: 5rpx;
	font-family: "yshst" !important;
	/* font-weight: bold; */
}
.tab-bar-item-text.active {
	color: white;
}
.tab-bar-item-icon {
	width: 35rpx;
	height: 35rpx;
}
</style>
